<template>
  <Modal v-model:visible="visible" :maskClosable="false" :centered="true" :style="{ width: '670px' }" :bodyStyle="{ display: 'flex', 'flex-flow': 'row wrap' }" title="镜像详情" :footer="null">
    <div>
      <label>系统</label>
      <span>{{ detail.extra_attrs.os }} / {{ detail.extra_attrs.architecture }}</span>
    </div>
    <div>
      <label>大小</label>
      <span>{{ friendlyVolume(detail.size) }}</span>
    </div>
    <div>
      <label>入口点</label>
      <span>{{ detail.extra_attrs.config.Entrypoint }}</span>
    </div>
    <div>
      <label>暴露端口</label>
      <span>{{ JSON.stringify(detail.extra_attrs.config.ExposedPorts) }}</span>
    </div>
    <div>
      <label>环境变量</label>
      <span v-html="detail.extra_attrs.config.Env.join('<br/>')"></span>
    </div>
    <div>
      <label>推送时间</label>
      <span>{{ friendlyDateTime(detail.push_time) }}</span>
    </div>
  </Modal>
</template>
<script setup>
  import { ref, watch, watchEffect } from 'vue';
  import { Modal } from 'ant-design-vue';
  import { friendlyVolume, friendlyDateTime } from '@/libs/helpers';

  const emits = defineEmits(['update:show']);

  const props = defineProps({
    show: {
      type: Boolean,
      default() {
        return false;
      }
    },
    detail: {
      type: Object,
      default() {
        return {
          extra_attrs: {
            config: {
              Entrypoint: [],
              Env: [],
              ExposedPorts: {}
            }
          }
        };
      }
    }
  });

  const visible = ref(false);

  watch(visible, () => {
    emits('update:show', visible.value);
  });

  watchEffect(() => {
    visible.value = props.show;
  });
</script>
<style lang="less" scoped>
  .ant-modal-body {
    display: flex;
    width: 100%;
    flex-flow: row wrap;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    justify-content: space-between;

    > div {
      flex: 0 0 49%;
      line-height: 24px;
      white-space: nowrap;
      padding: 5px 0 5px 0;
      flex-grow: 1;
      border-bottom: 1px solid #ccc;

      &:last-of-type {
        border-bottom-color: transparent;
      }

      > label {
        width: 80px;
        padding-right: 10px;
        display: inline-block;
        text-align: right;
        font-weight: bolder;
        vertical-align: top;
      }

      > span {
        display: inline-block;
      }
    }
  }
</style>
